<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" isELIgnored="false">
<head>
    <meta charset="UTF-8">
    <link href="http://java.sun.com/jsp/jstl/core" >
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>用户查询</title>
    <style type="text/css">
        .table1{
            width: 50%;
        }
        thead{
            color: #110b0c;
            background-color: #bfd660;
            font-size: 15px;
        }
        td {
            border: 0px solid #d0d0d0;
            color: #404060;
            padding: 20px;
            text-align: center;
        }
        .aaa{
            margin: 5% 0 50% auto; /* 定宽块级元素的水平居中通过设置左右margin为auto来实现*/
            width: 79.5%;
            height: 30%;
            background: rgba(0, 0, 0, 0.01);
            padding: 20px;
            color: #0c70ff;
        }
    </style>
</head>
<body style="text-align: center;">
<div id="demo" class="carousel slide" data-ride="carousel" style="width: 100%">

    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../images/1.jpg" style="width: 100% " >
        </div>
        <div class="carousel-item">
            <img src="../images/2.jpg" style="width: 100%">
        </div>
        <div class="carousel-item">
            <img src="../images/3.jpg" style="width: 100%">
        </div>
    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>
<nav class="navbar navbar-expand-sm bg-light">
    <ul class="navbar-nav" >
        <li class="nav-item">
            <a class="nav-link" href="javascript:about()">关于</a>
        </li>
    </ul>
    <div class="collapse navbar-collapse justify-content-end">
        <ul class="navbar-nav" >
            <li class="nav-item">
                <a href="#"   id="abc" class=" nav-link" data-toggle="popover" th:text="${session.user_name}" ></a></li>
        </ul>
    </div>
</nav>
<table class="table1" style="margin: auto;" frame="box" cellspacing="0" >
    <div style="width: 73.5%;height: 40px">
        <!--/*@thymesVar id="content" type=""*/-->
        <input id="query_content" type="text" placeholder="请输入用户名"  th:value="${content}" style="height: 30px;width:300px;">
        <button type="button"  onclick="queryByLike();" style="height:40px;width: 50px;">搜索</button>
    </div>
    <thead>
    <tr >
        <th>用户编号 </th>
        <th>用户姓名 </th>
        <th>用户年龄 </th>
        <th>用户性别 </th>
    </tr>
    </thead>
    <tbody id="tb">
    <tr th:each="user : ${pageBean.lists}" >
        <!--/*@thymesVar id="user_id" type=""*/-->
        <td th:text="${user.user_id}"></td>
        <!--/*@thymesVar id="user_name" type=""*/-->
        <td th:text="${user.user_name}"></td>
        <!--/*@thymesVar id="user_age" type=""*/-->
        <td th:text="${user.user_age}"></td>
        <!--/*@thymesVar id="user_sex" type=""*/-->
        <td th:text="${user.user_sex}"></td>
    </tr>
    </tbody>
</table>
<div class="aaa">
    <div class="container" >
        <ul class="pagination ">
            <li class="page-item"><a class="page-link" th:href="${'userInfo?userCurrentPage='+1}">首页</a></li>
            <li class="page-item"><a class="page-link" th:href="'userInfo?userCurrentPage='+${pageBean.currPage-1}"><<</a></li>
            <li class="page-item"><a class="page-link" th:href="${'userInfo?userCurrentPage='+1}">1</a></li>
            <li class="page-item "><a class="page-link" th:href="${'userInfo?userCurrentPage='+2}">2</a></li>
            <li class="page-item"><a class="page-link" th:href="${'userInfo?userCurrentPage='+3}">3</a></li>
            <li class="page-item"><a class="page-link">...</a></li>
            <li class="page-item"><a class="page-link" th:href="'userInfo?userCurrentPage='+${pageBean.currPage+1}">>></a></li>
            <li class="page-item"><a class="page-link" th:href="'userInfo?userCurrentPage='+${pageBean.totalPage}">末页</a></li>
            <li class="page-item"><a class="page-link">共&nbsp;<span th:text="${pageBean.totalPage}"></span>&nbsp;页</a></li>
            <li class="page-item"><a class="page-link">当前第<span th:text="${pageBean.currPage}"></span>页</a></li>
            <li class="page-item"><a class="page-link" style="height: 38px" >跳转到第<input  size="3"   type="text" id="ww" name="gotoPageNo" th:value="${qq}">页</a></li>
            <li class="page-item"><a class="page-link" onclick="last()">确认</a></li>
            <li class="page-item"><a class="page-link" href="javascript:history.back(-1)">返回</a></li>
        </ul>
    </div>

</div>
</body>
<script>

    function queryByLike(){//搜索
        var content = document.getElementById("query_content").value;
        window.location.href="queryUserByLike?content="+content;
    }
    function last() {//跳转到第几页
        var value = document.getElementById("ww").value;
        window.location.href="userInfo?userCurrentPage ="+value;
    }

    $(function() {
        $("[data-toggle='popover']").each(function() {
            var element = $(this);
            element.popover({
                trigger: 'manual',
                html: true,
                title: '',
                placement: 'bottom',
                content: function() {
                    return content();
                }
            }).on("mouseenter", function() {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function() {
                    $(_this).popover('hide');
                });
            }).on("mouseleave", function() {
                var _this = this;
                setTimeout(function() {
                    if(!$(".popover:hover").length) {
                        $(_this).popover("hide")
                    }
                }, 100);
            });

        });

    });
    //模拟动态加载内容(真实情况可能会跟后台进行ajax交互)
    function  content()  {
        var  data  =  $("<form><nav class=\"navbar navbar-expand-sm bg-light\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a href='#' class=\"nav-link\">个人主页</a></li>"+"<br><a href='#' class=\"nav-link\" onclick='user_logout()'>退出</a></ul></nav></form>");
        return  data;
    }

    //鼠标点击行变色
    var tb = document.getElementById('tb');
    tb.onmouseover = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = '#d6d5b4'
    }

    tb.onmouseout = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = ''
    }


    var ts = document.getElementById('ts');
    ts.onmouseover = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = '#d6d5b4'
    }

    ts.onmouseout = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = ''
    }
    function user_logout() {
        if (confirm("确定要退出吗？")){
            location.href="user_logout";
        }
    }

    function about() {
        confirm("欢迎来到该管理系统！！！！")
    }




</script>
</html>

</body>
</html>